<template>
  <div class="shopcar-container">
    <van-swipe-cell v-for="(item,index) in productList" :key="item.id">

      <van-checkbox-group v-model="checkedList">
        <div class="shopcart-box">
          <van-checkbox :name="item.id" checked-color="#F63515" @click="handleTotal"></van-checkbox>
          <img :src="item.imageHost+''+item.mainImage" alt="图片未找到">
          <div class="shopcart-item-info">
            <p class="shopcart-name">{{item.name}}</p>
            <p class="shopcart-subtitle">{{item.subtitle}}</p>
            <div class="shopcart-stepper">
              <span class="shopcart-price">￥{{item.price}}</span>
              <van-stepper v-model="productList[index].count" min="1" max="999" @change="handleTotal" />
            </div>
          </div>
        </div>
      </van-checkbox-group>

      <template slot="right">
        <van-button square type="danger" text="删除" @click="handDel(item.id)" />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { getCarList, delCar } from "../api/index";

export default {
  data() {
    return {
      productList: [],
      checkedList: [],
      priceTotal: 2020
    }
  },
  methods: {
    // 删除商品
    handDel(id) {
      const params = {
        id: id
      };

      delCar(params).then(res => {
        console.log('删除状态：', res);
      })

      // 获取购物车数据
      getCarList().then(res => {
        this.productList = res;
      })
    },
    // 全选商品
    allCheck(flag) {
      this.checkedList = [];
      if (flag) {
        this.productList.forEach(item => {
          this.checkedList.push(item.id);
        });
      }
      // 计算商品总价
      this.handleTotal();
    },
    // 计算商品总价
    handleTotal() {
      // 可以加，先在这里计算所有价格，再传进去
      let total = 0;
      this.productList.forEach(item => {
        if (this.checkedList.indexOf(item.id) !== -1) {
          // 后台的price=$8383  vant的price=$83.83 这里换算一下
          total += item.price * item.count * 100;
        }
      })
      this.$store.commit('addTotal', total);
    }
  },
  mounted() {
    // 获取购物车数据
    getCarList().then(res => {
      this.productList = res;
    })
  }
}
</script>

<style lang="scss" scoped>
@import "../common/style/mixin.scss";

.shopcar-container {
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    height: 200px;

    img {
      width: 180px;
      height: 180px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex: 70%;
      text-align: left;
      flex-direction: column;
      justify-content: space-between;

      .shopcart-name {
        height: 70px;
        font-size: 26px;
        overflow: hidden;
      }

      .shopcart-subtitle {
        font-size: 24px;
        color: #999;
      }

      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shopcart-price {
          font-size: 30px;
          color: $red;
        }
      }
    }
  }
  .van-button {
    width: 100px;
    height: 100%;
  }
}
</style>